<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content=""/>
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/slider.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/normalize.css}"/>
    <link rel="stylesheet" th:href="@{/mb/css/style-button.css}">
    <link rel="stylesheet" th:href="@{/mb/css/layer.css}">
    <title>注册使用</title>

    <style>
        .name span {
            color: red;
        }

        .try_content {
            width: 900px;
        }

        #register label.error {
            color: orangered;
            font-family: 楷体;
        }

    </style>
</head>

<body>

<!--头开始-->
<header class="navbar-fixed-top headerbg">
    <div class="logo">
        <img th:src="@{/mb/images/mclogo.png}" alt="" style="margin-top: -30px;margin-left: 30px"></a></div>
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/login}"><span>登录</span></a></h3></li>
            <li class="navLi  on"><h3><a href="http://www.baidu.com" th:href="@{/register}"><span>注册</span></a></h3>
            </li>
            <li class="navLi" style="overflow: hidden;display: none">
                <h3><a href="javascript:click()">
                    <img th:src="@{/images/center.png}" height="60px" width="60px"></a>
                </h3>
            </li>
        </ul>
    </div>
</header>

<!--动态线条结尾-->

<!--图片-->
<div class="bannerN animated">
    <div class="imgFull"><img th:src="@{/mb/images/p_bg_02.jpg}" class="img-responsive"></div>
    <h2 class="banH2 wow fadeInUp">欢迎使用</h2>
    <h3 class="wow fadeInUp">图书管理系统</h3>

    <div class="sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
    </div>
</div>

<!--注册使用样式-->
<div class="container">
    <div class="mtb50 Register_style">
        <div class="tryout_style clearfix">
            <form id="register" class="try_content" th:action="@{/addUser}" method="post">
                <div class="name">
                    <label class="label_name">姓名:</label>
                    <input required="ture" id="name" name="name" type="text" class="text width500"
                           placeholder="请输入您的真实姓名" value="">
                </div>

                <div class="name">
                    <label class="label_name">性别:</label>
                    <div style="line-height: 42px;width: 100%;height: 20px;">
                        <input type="radio" class="blue" name="userSex" id="" value="1" checked="checked"/>男
                        <input type="radio" class="blue" name="userSex" id="Type" value="2"/>女
                    </div>
                </div>

                <div class="name">
                    <label class="label_name">年龄:</label>
                    <input id="age" name="age" type="number" class="text add_qq" placeholder="请输入您的年龄"></span>
                </div>

                <div class="name">
                    <label class="label_name">账号:</label>
                    <input id="username" name="username" type="text" class="text add_qq" placeholder="请输入您的账号">
                </div>

                <div class="name">
                    <label class="label_name">部门:</label>
                    <div style="line-height: 42px;width: 100%;height: 20px;">
                        <input type="radio" class="blue" name="userDep" value="1" checked="checked"/>总经理办公室
                        <input type="radio" class="blue" name="userDep" value="2"/>人力资源部
                        <input type="radio" class="blue" name="userDep" value="3"/>财务部
                        <input type="radio" class="blue" name="userDep" value="4"/>生产技术部
                        <input type="radio" class="blue" name="userDep" value="5"/>计划营销部
                        <input type="radio" class="blue" name="userDep" value="6"/>安全监察部
                        <input type="radio" class="blue" name="userDep" value="7"/>后勤部
                    </div>
                </div>

                <div class="name">
                    <label class="label_name">密码:</label>
                    <input id="password" name="password" type="password" class="text width500"
                           placeholder="请输入密码(6-10位)">
                </div>

                <div class="name">
                    <label class="label_name">验证密码:</label>
                    <input id="repassword" name="repassword" type="password" class="text width500"
                           placeholder="请再次输入密码">
                </div>

                <div class="name">
                    <label class="label_name">&nbsp;联系方式:</label>
                    <input id="userTel" name="userTel" class="text width500" th:placeholder="请输入您的联系方式" type="text">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </div>

                <div class="name clearfix">
                    <button id="submit" class="btn_submit btn" type="submit" onclick="return confirm('确认注册？')">注 册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<!--底部样式-->
<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span>
        <span class="CopyRight_name">图书管理系统 </span></div>
</footer>

<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/common.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/slider.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/html5.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/layer.js}"></script>
<!--表单验证-->
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages_zh.js}"></script>

<script type="text/javascript">
    $("#register").validate({
        rules: {
            name: {
                required: true,
                minlength: 2,
                maxlength: 20,
                byteMaxLength: 20,
                valiEnglish: true
            },
            username: {
                required: true,
                minlength: 8,
                maxlength: 8,
                digits: true,

            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 10
            },
            repassword: {
                required: true,
                equalTo: "#password"
            },
            age: {
                required: true,
                range: [18, 55]
            },
            userTel: {
                required: true,
                digits: true,
                minlength: 11
            }

        },
        messages: {
            username: {
                minlength: "请输入8位用户名",
                maxlength: "请输入8位用户名"
            },
            password: {
                required: "没有填写密码",
                minlength: "密码长度不能小于 6 位",
                maxlength: "密码长度不能大于 10 位"
            },
            repassword: {
                required: "没有确认密码",
                equalTo: "两次输入密码不一致"
            }
        }
    });
</script>
</body>
</html>
